<template>
	<view class="shop-invite">
		<NavBar :title="pageType"/>
		<view class="switch-bar">
			<view 
				@tap="tapType(item.status)" 
				class="switch-item" 
				:class="typeStatus==item.status?'a-item':''"
				v-for="item in inviteType" 
				:key="item"
			> {{ item.title }} </view>
		</view>
		<view class="content" v-if="shopORriderList.length">
			<!-- 商户列表 -->
			<view class="shop-list" v-if="pageType==='商户邀请'">
				<view class="shop-item" v-for="(item, index) in shopORriderList" :key="item">
					<view class="top">
						<view class="time"> 提交时间：{{item.create_time}} </view>
						<view class="status"> {{item.status=='review'?'待审核':item.status=='checked'?'已通过':'已驳回'}} </view>
					</view>
					<view class="shop-info" @tap="goShopDetails(item.id)">
						<view class="user-name"> {{item.name}} </view>
						<view class="shop-phone"> 电话：{{item.mobile}} </view>
						<view class="as-agent"> 关联代理商：{{agentName}} </view>
						<view class="reject" v-if="item.status=='reject'"> 驳回理由：{{item.reject_reason}} </view>
					</view>
					<view class="btn-box" v-if="item.status=='review'">
						<view class="btn" @tap="openPop(item.id)"> 审核驳回 </view>
						<view class="btn" @tap="shopResolve(item, index)"> 审核通过 </view>
					</view>
				</view>
			</view>
			<!-- 骑手列表 -->
			<view class="rider-list" v-else>
				<view class="rider-item" v-for="(item, index) in shopORriderList" :key="item">
					<view class="top">
						<view class="time"> 提交时间：{{item.create_time}} </view>
						<view class="status" :class="item.status==1?'a-status':''"> {{item.status==0?'待审核':item.status==1?'已通过':'已驳回'}} </view>
					</view>
					<view class="rider-info" @tap="goRiderDetails(item.id)">
						<view class="user-name"> {{item.name}} </view>
						<view class="rider-phone"> 电话：{{item.mobile}} </view>
						<view class="as-agent"> 关联代理商：{{agentName}} </view>
						<view class="reject" v-if="item.status==2"> 驳回理由：{{item.reject_msg}} </view>
					</view>
					<view class="btn-box" v-if="item.status==0">
						<view class="btn" @tap="openPop(item.id)"> 审核驳回 </view>
						<view class="btn" @tap="riderPassExa(item.id, index)"> 审核通过 </view>
					</view>
				</view>
			</view>
		</view>
		<Empty txt="这里空荡荡的~" v-else/>
		<view class="btn-box">
			<view class="btn" @tap="inviteShop"> {{ pageType=="商户邀请"?'邀请商户':'邀请骑手' }} </view>
		</view>
		<PopModal title="驳回原因" ref="popupRef" textarea="请填写驳回理由" @confirm="rejectFunc" />
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad, onShow, onReachBottom } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import Empty from '@/components/Empty.vue';
	import PopModal from '@/components/Modal.vue'
	import { 
		GetShopInviteListApi, 
		SetShopInviteStatusApi, 
		GetRiderInviteListApi,
		EditRiderInfoApi
	} from '@/service/agent.js'
	const pageType = ref()
	const agentName = ref('')
	const inviteType = [
		{ title: '全部', status: '-1' },
		{ title: '待审核', status: '1' },
		{ title: '已驳回', status: '2' },
		{ title: '已通过', status: '3' },
	]
	const typeStatus = ref(-1)
	const page = ref(1)
	const pageSize = ref(15)
	const total = ref()
	const shopORriderList = ref([])
	const tapType = (status) => {
		if(typeStatus.value == status) return
		typeStatus.value = status
		shopORriderList.value = []
		page.value = 1
		getShopOrRiderList()
	}
	const popupRef = ref()
	// 商家审核通过
	const shopResolve = (item, i) => {
		let params = {
			id: item.id,
			status: 1,
			username: item.mobile,
			password: 'xg88888888'
		}
		SetShopInviteStatusApi(params).then(res => {
			shopORriderList.value[i].status = 'checked'
		})
	}
	const shopReject = (params) => {
		SetShopInviteStatusApi(params).then(res => {
			popupRef.value.close()
		})
	}
	// 骑手申请通过
	const riderPassExa = (id, i) => {
		let params = {
			id,
			status: 1
		}
		EditRiderInfoApi(params).then(res => {
			shopORriderList.value[i].status = 1
		})
	}
	// 骑手申请驳回
	const riderReject = (params) => {
		EditRiderInfoApi(params).then(res => {
			popupRef.value.close()
		})
	}
	const rejId = ref()
	const openPop = (id) => {
		rejId.value = id
		popupRef.value.open()
	}
	const rejectFunc = (val) => {
		if(val=='') return getApp().globalData.toast('请输入驳回原因')
		let params = {
			id: rejId.value,
			status: 2,
			reject_msg: val
		}
		if(pageType.value =='商户邀请') return shopReject(params)
		else riderReject(params)
	}
	const goRiderDetails = (id) => {
		uni.navigateTo({ url: `/pages/agentPages/invite/riderDetils/riderDetils?id=${id}` })
	}
	const goShopDetails = (id) => {
		uni.navigateTo({ url: `/pages/agentPages/invite/shopDetails/shopDetails?id=${id}` })
	}
	const goDetails = () => {
		let url = '/pages/agentPages/invite/riderDetils/riderDetils'
		if (pageType.value == '商户邀请') url = '/pages/agentPages/invite/shopDetails/shopDetails'
		uni.navigateTo({ url })
	}
	const inviteShop = () => {
		let type = 1 // '邀请商户'
		if (pageType.value == '骑手邀请') type = 2 // '邀请骑手'
		uni.navigateTo({
			url: `/pages/agentPages/invite/inviteCode/inviteCode?type=${type}`
		})
	}
	const getShopOrRiderList = () => {
		let params = {
			status: typeStatus.value
		}
		if(pageType.value == '商户邀请') {
			GetShopInviteListApi(params).then(res => {
				shopORriderList.value.push(...res.data)
				total.value = res.total
			})
		} else {
			GetRiderInviteListApi(params).then(res => {
				shopORriderList.value.push(...res.data)
				total.value = res.total
			})
		}
	}
	onLoad((e) => {
		const { title, agent_name } = e
		pageType.value = title
		agentName.value = agent_name
	})
	onShow(() => {
		shopORriderList.value = []
		getShopOrRiderList()
	})
	onReachBottom(() => {
		if(page.value*pageSize.value>=total.value) return
		page.value = page.value + 1
		getShopOrRiderList()
	})
</script>

<style lang="scss" scoped>
	.shop-invite {
		padding-bottom: 60px;
		.switch-bar {
			height: 30px;
			display: flex;
			.switch-item {
				height: 30px;
				line-height: 30px;
				flex: 1;
				color: #333333;
				font-size: 14px;
				text-align: center;
				&.a-item {
					color: #FF3B1E;
					font-size: 16px;
					font-weight: 500;
					line-height: 19px;
					position: relative;
					&::before {
						position: absolute;
						bottom: 0px;
						left: 50%;
						transform: translateX(-50%);
						display: block;
						content: '';
						width: 30px;
						height: 4px;
						border-radius: 33px;
						background: linear-gradient( 360deg, #FF8508 0%, #FF4847 100%);
					}
				}
			}
		}
		.content {
			padding: 10px 12px;
			box-sizing: border-box;
			.shop-list, .rider-list{
				.shop-item, .rider-item {
					padding: 15px 10px;
					border-radius: 10px;
					margin-bottom: 10px;
					background-color: #fff;
					.top {
						display: flex;
						font-size: 14px;
						font-weight: 400;
						line-height: 16px;
						align-items: center;
						padding-bottom: 8px;
						border-bottom: 1px solid #EEEEEE;
						justify-content: space-between;
						.time {
							color: #999999;
						}
						.status {
							color: #FF3B1E;
							&.a-status {
								color: #999999;
							}
						}
					}
					.shop-info, .rider-info {
						padding-top: 10px;
						.user-name {
							color: #333333;
							font-size: 16px;
							font-weight: 500;
							text-align: left;
							line-height: 24px;
							margin-bottom: 6px;
						}
						.shop-phone, .rider-phone {
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							line-height: 16px;
							margin-bottom: 8px;
						}
						.as-agent {
							color: #F5A623;
							font-size: 14px;
							font-weight: 400;
							line-height: 16px;
							margin-bottom: 6px;
						}
						.reject {
							color: #666666;
							font-size: 14px;
							font-weight: 400;
							line-height: 16px;
							margin-bottom: 6px;
						}
					}
					.btn-box {
						display: flex;
						justify-content: end;
						.btn {
							width: 88px;
							height: 28px;
							color: #333333;
							font-size: 14px;
							font-weight: 400;
							line-height: 28px;
							text-align: center;
							background: #FFFFFF;
							border-radius: 151px;
							border: 1px solid #999999;
							margin-left: 10px;
							&:nth-last-of-type(1) {
								border: none;
								color: #FFFFFF;
								background: #FF3B1E;
							}
						}
					}
				}
			}
		}
		.btn-box {
				position: fixed;
				left: 0;
				right: 0;
				bottom: 0;
				padding: 0 12px 10px;
				background-color: #FFFFFF !important;
			.btn {
				height: 50px;
				color: #FFFFFF;
				font-size: 17px;
				font-weight: 500;
				line-height: 50px;
				text-align: center;
				background: #FF3B1E;
				border-radius: 106px 106px 106px 106px;
			}
		}
	}

</style>
